<!DOCTYPE html>
<html>

<head>
    <title>小郑同学</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <style>
        section {
            width: 1024px;
            min-height: 500px;
            margin: 0 auto;

        }

        .jinru {
            width: 956px;
            height: 22px;
            margin: 0 auto;
            margin: 30px 0px;
            line-height: 22px;
            border: 1px solid #88dfae;
            font-size: 16px;
            font-weight: normal;
            color: #2f9a4c;
            padding: 15px 8px;
            display: flex;
            position: relative;
        }

        .jinru>p {
            margin-top: 0px;
            color: #2f9a4c;
        }

        .jinru>button {
            font-size: 14px;
            font-weight: normal;
            color: #ffffff;
            border-color: transparent;
            background-color: #10ac62;
            margin-top: -10px;
            background-image: none;
            padding-top: 12px;
            padding-bottom: 12px;
            padding: 10px 20px;
            position: absolute;
            right: 5px;
        }

        table {
            width: 66.667%;
            /* background-color: cornflowerblue; */
            text-align: left;
            border-right: 1px solid #dddddd;
            padding-right: 30px;
        }

        thead {
            width: 594px;
            height: 20px;
            margin: 0 auto;
            font-size: 16px;
            font-weight: bold;
            color: #555555;
            font-family: 微软雅黑;
            border-color: #dddddd;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 12px;
            padding-right: 12px;


        }

        th {
            border-bottom: 3px solid #ddd;
        }



        tr>td {
            font-size: 14px;
            /* line-height: 111px; */
            border-bottom: 1px dotted #ddd;

        }

        tr>td>div>span {
            font-size: 25px;
            color: gray;
        }

        tr>td>div>span:hover {
            color: rgb(72, 72, 243);
        }

        tr>td>div {
            display: flex;
            height: 111px;
            line-height: 111px;
        }

        tr>td>div>img {
            padding: 8px;
            width: 90px;
            height: 90px;
        }

        tr>td>div>p {
            margin-top: 0px;
            padding-left: 30px;
            padding-right: 30px;
        }

        tr>td>div>button {
            border: none;
            outline: none;
            border: 1px solid #cccccc;
            height: 40px !important;
            width: 26px !important;
            background-color: transparent;
            margin-top: 36px;
        }

        .shouyintai {
            padding-left: 20px;
            width: 325px;
            min-height: 373px;
            position: absolute;
            top: 0px;
            left: 683px;
            box-sizing: border-box;
        }

        .shouyintai>h2 {
            font-size: 16px;
            font-weight: bold;
            color: #555555;
            font-family: 微软雅黑;
            padding-top: 6px;
            padding-bottom: 6px;
            border-bottom: 3px solid #dddddd;
        }

        .shouyintai>p {
            font-size: 14px;
            font-weight: bold;
            color: #777777;
            padding-bottom: 12px;
            padding-top: 4px;
            text-align: left;
        }

        .shouyintai>p>span:nth-child(2) {
            font-size: 14px;
            font-weight: normal;
            color: #777777;
            float: right;
        }

        .shouyintai>p:nth-child(3) {
            border-bottom: 1px dotted #dddddd;
        }

        .shouyintai>p:nth-child(4) {
            border-bottom: 3px solid #dddddd;
        }

        .shouyintai>button {
            width: 100%;
            height: 41px;
            color: #fff;

            margin-top: 15px;
            background-color: #777777;
        }

        .shouyintai>button:hover {
            background-color: #232323;
        }

        .shouyintai>h3 {
            border-bottom: 3px solid #ddd;
            font-size: 16px;
            font-weight: bold;
            color: #555555;
            padding-bottom: 10px;
            margin-top: 15px;
        }

        .shouyintai>input {
            border: none;
            display: block;
            /* width: 100%; */
            outline: none;
            font-size: 16px;
            font-weight: normal;
            color: #919191;
            background-color: #ffffff;
            padding-top: 7px;
            padding-bottom: 7px;
            border: 1px solid #999999;
        }

        .juan {
            margin-top: 15px;
            margin-bottom: 15px;
            width: 302px;
        }

        .shiyong {
            width: 100%;
        }

        .empty {
            font-size: 25px;
            position: fixed;
            top: 45%;
            left: 45%;
            display: none;
            position: absolute;
            left: 500px;
            top:300px
        }

        .empty a {
            color: red;
        }

        .empty a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <header></header>
    <section>
        <div class="empty">
            购物车空空如也，<a href="fenlei1.html">快去选购吧</a>
        </div>
        <div class="jinru">
            <p><span style=" color: #2f9a4c;">√</span> "柴烧花器" 成功添加进您的购物车.</p>
            <button class="jixu">继续购物</button>
        </div>
        <div style="position: relative;">
            <table cellspacing="0px">
                <thead>
                    <tr style=" border-bottom: 3px solid #ddd;">
                        <th>商品</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>合计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="s">
                            <div >
                                <span class="del">
                                    ×
                                </span>
                                
                                <img src="./images/4.webp" alt="" style="width: 90px;height: 90px;">
                                <p>柴烧花器</p> 
                            </div>
                        </td>
                        <td>￥ <span class="price">
                                500.00</span></td>
                        <td>
                            <div>
                                <button class="reduces">-</button>
                                <button class="span">1</button>
                                <button class="adds">+</button>
                            </div>
                        </td>
                        <td> ￥<span class="prices">500.00</span>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="shouyintai">
                <h2>购物车总计</h2>
                <p>
                    <span>购物车小计</span>
                    <span class="pricetal">￥500.00</span>
                </p>
                <p>
                    <span>运费</span>
                    <span>免费送货</span>
                </p>
                <p>
                    <span>订单总计</span>
                    <span class="pricetal">￥500.00</span>
                </p>
                <button class="qu">前往收银台</button>
                <h3>优惠券：</h3>
                <input type="text" placeholder="优惠券代码" name="" id="" class="juan">
                <input type="button" value="使用优惠券" class="shiyong">
            </div>
        </div>
    </section>
    <footer></footer>
</body>

</html>
<script src="./js/jQuery.js"></script>
<script>
    $("header").load("header.html");
    $("footer").load("foot.html");

    let x = document.cookie;
    console.log(x)
    if (x == "") {
        $(".adds").each(function () { //点击增加的按钮
            $(this).click(function () {
                //1.改变数量 
                let count = parseFloat($(this).parents("tr").find(".span").html());
                count++;
                // console.log(count)
                $(this).parent("div").find(".span").html(count);
                //2.改小计(先找到单价与数量，再相乘，最后放在小计(“.prices”)里)
                var price = parseFloat($(this).parents("tr").find(".price").html());
                // console.log(price);
                var money = (price * count);
                $(this).parents("tr").find(".prices").html(money + ".00");
                //3.改总价
                total();
            });
        });
        $(".reduces").each(function () { //点击减少的按钮
            $(this).click(function () {
                //1.改变数量 
                var count = parseFloat($(this).parents("tr").find(".span").html());
                count--;
                if (count < 1) { //当数量减到1时不能再减
                    return;
                }
                $(this).parent("div").find(".span").html(count);
                //2.改小计
                var price = parseFloat($(this).parents("tr").find(".price").html());
                var money = (price * count);
                $(this).parents("tr").find(".prices").html(money);
                total();
            });
        });

        //删除
        $(".del").each(function () {
            $(this).click(function () {
                let re = $(this).parents("tr"); //找到要删除的行
                if (confirm("你确定删除吗？")) {
                    re.remove();
                }
                //删除后重新排序号
                for (let i = 0; i < $(".num").length; i++) {
                    $(".num")[i].innerHTML = i + 1;
                }
                //全都删除时清空table(通过获取tbody的高度来判断)
                let clear = $("tbody").height();
                if (clear == 50) {
                    $("table").remove();
                    $(".empty").css({ //删完时显示"购物车为空"这个盒子
                        display: "block"
                    });
                }
                total();
            });
        });
        //合计
        function total() {
            let sum = 0;
            $(".prices").each(function () { //先循环每个小计 
                sum += parseFloat($(this).html());
                $(".pricetal").html(sum + ".00");
            });
        }
    }


    let cookie = document.cookie
    let cookieName = 'userInfo'
    let arr = cookie.split('; ')
    let userInfo = null
    for (let i = 0; i < arr.length; i++) {
        let tempArr = arr[i].split('=')
        if (tempArr[0] === cookieName) {
            userInfo = JSON.parse(tempArr[1])
        }
    }
    // console.log($(".kuang").html())
    let name = userInfo.username;
    console.log(name);
    if (name != "") {

        $(".adds").each(function () { //点击增加的按钮
            $(this).click(function () {
                //1.改变数量 
                let count = parseFloat($(this).parents("tr").find(".span").html());
                count++;
                // console.log(count)
                $(this).parent("div").find(".span").html(count);
                //2.改小计(先找到单价与数量，再相乘，最后放在小计(“.prices”)里)
                var price = parseFloat($(this).parents("tr").find(".price").html());
                // console.log(price);
                var money = (price * count);
                $(this).parents("tr").find(".prices").html(money + ".00");
                //3.改总价
                total();

            });
        });
        $(".reduces").each(function () { //点击减少的按钮
            $(this).click(function () {
                //1.改变数量 
                var count = parseFloat($(this).parents("tr").find(".span").html());
                count--;
                if (count < 1) { //当数量减到1时不能再减
                    return;
                }
                $(this).parent("div").find(".span").html(count);
                //2.改小计
                var price = parseFloat($(this).parents("tr").find(".price").html());
                var money = (price * count);
                $(this).parents("tr").find(".prices").html(money);
                total();

            });
        });

        //删除
        $(".del").each(function () {
            $(this).click(function () {
                let re = $(this).parents("tr"); //找到要删除的行
                if (confirm("你确定删除吗？")) {
                    re.remove();
                }
                total();

                //删除后重新排序号
                for (let i = 0; i < $(".num").length; i++) {
                    $(".num")[i].innerHTML = i + 1;
                }
                //全都删除时清空table(通过获取tbody的高度来判断)
                let clear = $("tbody").height();
                if (clear < 50) {
                    $("table").remove();
                    $(".empty").css({ //删完时显示"购物车为空"这个盒子
                        display: "block",
                        textAlign:"left",
                        color:"red"
                    });
                }
            });
        });
        //合计
        function total() {
            let sum = 0;
            $(".prices").each(function () { //先循环每个小计 
                sum += parseFloat($(this).html());
                $(".pricetal").html(sum + ".00");
            });
        }


        let cookie = document.cookie
        let cookieName = 'userInfo' // cookie名称
        let arr = cookie.split('; ') // 将cookie信息和时间戳拆分为数组
        let userInfo = null
        for (let i = 0; i < arr.length; i++) {
            let tempArr = arr[i].split('=') // 将cookie名称和data拆分开，分别是数组的第一个元素和第二个元素
            if (tempArr[0] === cookieName) {
                userInfo = JSON.parse(tempArr[1])
            }
        }

        let name = userInfo.username;
        //显示购物车
        $.get("./goodsAndShoppingCart/getShoppingCart.php", {
            "vipName": name,
        }, function (data) {
            console.log(data)
            show1(data);
        }, "json");

        function show1(data) {
            $(".span").eq(0).html(`${data[0].goodsCount}`)
            var count = $(".span").eq(0).html();
            // console.log(count);
            var price = parseFloat($(".price").html());
            var money = (price * count);
            $(".span").parents("tr").find(".prices").html(money);
            total();

        }

        //删除商品
        $(".del").eq(0).click(function () {
            $.get("./goodsAndShoppingCart/deleteGoods.php", {
                "vipName": userInfo.username,
                "goodsId": "0"
            }, function (data) {
                console.log(data);
            }, "json");
        })


        //修改购物车中商品的数量
        $(".qu").eq(0).click(function () {
            $.get("./goodsAndShoppingCart/updateGoodsCount.php", {
                "vipName": userInfo.username,
                "goodsId": "0",
                "goodsCount": document.getElementsByClassName("span")[0].innerHTML
            }, function (data) {
                // console.log(data);
            }, "json");
        })
        $(".jixu").eq(0).click(function () {
            location.href = "fenlei2.html"
        })

    }
</script>